<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>报名管理</el-breadcrumb-item>
    </el-breadcrumb>
<!--卡片-->
    <el-card class="box-card" style="width: 100%;height: 600px">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: center">
        <el-form-item label="学生学号">
          <el-input v-model="formInline.studentNumber" placeholder="学生学号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="onReflush" icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" @click="onSubmit(formInline.studentNumber)" icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-row style="text-align: right;padding-bottom: 10px">
        <el-upload
            style="display: inline-block;"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList">
        <el-button icon="el-icon-upload" round>导入</el-button>
        </el-upload>
        <el-button type="success" round icon="el-icon-plus">添加</el-button>
        <el-button type="info" round icon="el-icon-download">导出</el-button>
      </el-row>
<!--表格内容显示区-->
      <el-table
        :data="tableData"
        border
        style="width: 100%;height: 400px"
        :align='center'
        :cell-style='cellStyle'
        :header-cell-style='rowClass'>
        <el-table-column
          prop="name"
          fixed
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="student_number"
          label="学号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="50">
        </el-table-column>
        <el-table-column
          prop="class_name"
          label="班级名称"
          width="120">
        </el-table-column>
        <el-table-column
            prop="c_language"
            label="C语言程序设计"
            width="120">
        </el-table-column>
        <el-table-column
            prop="circuit"
            label="电路"
            width="120">
        </el-table-column>
        <el-table-column
            prop="experience"
            label="项目经验"
            width="600">
        </el-table-column>
        <el-table-column
            prop="skill"
            label="技能与获奖"
            width="600">
        </el-table-column>
        <el-table-column
            fixed="right"
            prop="admin"
            label="是否录取"
            width="120">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.admit"
                @click="clickSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="220">
          <template slot-scope="scope">
            <el-button type="info" icon="el-icon-view" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" @click="updateAdmit(scope.row.student_number,scope.row.admit)" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="dialogVisible = true;num = scope.row.student_number" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
<!--分页-->
      <div class="block" style="padding-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="20%">
        <span>确定要删除此条信息？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteRegistration(num)">确 定</el-button>
  </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {postRequest} from "../../utils/api";
import axios from "axios";

export default {
  name: 'Registration',
  data() {
    return {
      fileList: [],
      total: '',
      num: '',
      dialogVisible: false,
      formInline: {
        studentNumber: '',
        currentPage4: 4
      },
      tableData: [{
        name: '',
        student_number: '',
        gender: '',
        class_name: '',
        c_language: '',
        circuit: '',
        experience: '',
        skill: '',
        admit: ''
      }]
    }
  },
  created() {
    postRequest('/registration/all').then(resp=>{
      if (resp) {
        console.log(JSON.stringify(resp))
        this.tableData=resp;
      }
    })
    postRequest('/registration/counts').then(resp=>{
      if (resp) {
        console.log(JSON.stringify(resp))
        this.total = resp;
      }
    })
  },
  methods: {
    onSubmit(student_number) {
      axios.post('/registration/search/'+student_number).then(res=>{
        this.tableData = res;
      })
    },
    onReflush() {
      this.formInline.studentNumber = ''
      axios.post('/registration/all').then(res=>{
        this.tableData = res;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    clickSwitch(index){
      this.tableData[index].admit = !this.tableData[index].admit;
    },
    cellStyle({row, column, rowIndex, columnIndex}){
          return 'text-align:center';
    },
    rowClass({row, rowIndex}){
       return 'text-align:center';
    },
    deleteRegistration(student_number){
      this.dialogVisible = false;
      axios.post('/registration/delete/'+student_number).then(res=>{
        postRequest('/registration/all').then(resp=>{
          if (resp) {
            this.tableData=resp;
          }
        })
        postRequest('/registration/counts').then(resp=>{
          if (resp) {
            this.total = resp;
          }
        })
      })
    },
    updateAdmit(student_number,admit){
      axios.post('/registration/updateAdmit/'+student_number+'/'+admit).then(res=>{
        postRequest('/registration/all').then(resp=>{
          if (resp) {
            console.log(JSON.stringify(resp))
            this.tableData=resp;
          }
        })
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}
.upload-demo{
  padding-right: 10px;
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>
